<script setup>
import { getToken } from '@/utils/auth';
import { useGlobalState } from '@/store/globalState.js';
const props = defineProps({
  title: { type: String, default: () => '' },
  currentNode: { type: Object, default: () => null },
  currentData: { type: Object, default: () => null },
});
const queryParams = ref({
  projectName: '',
});
const uploadList = ref({
  // 设置上传的请求头部
  headers: { Authorization: 'Bearer ' + getToken() },
  // 上传的地址
  url: useGlobalState().globalState.serverUrl + '/file/uploadFile',
});
const fileLists = ref([]);
</script>
<template>
  <div>
    <el-form :model="queryParams" ref="Forms" size="small" class="uploadForm">
      <el-form-item label="上级区域名称" prop="">
        <div class="u-ta-right">{{ currentNode?.parent?.data?.name ?? '--' }}</div>
      </el-form-item>
      <el-form-item
        label="区域名称"
        prop="projectName"
        :rules="[
          { required: true, message: '请输入区域名称', trigger: 'blur' },
          { min: 0, max: 50, message: '名称长度不超过50个字符', trigger: 'blur' },
        ]"
      >
        <el-input
          v-filter-input
          v-model.trim="queryParams.projectName"
          placeholder="请输入区域名称"
          clearable
          size="small"
        />
      </el-form-item>
      <el-form-item label="区域ID" prop="">
        <div class="u-ta-right">{{ currentNode?.parent?.data?.name ?? '--' }}</div>
      </el-form-item>
      <el-form-item label="区域面积" prop="projectName">
        <el-input
          v-filter-input
          v-model.trim="queryParams.projectName"
          placeholder="请输入区域面积"
          clearable
          size="small"
        >
          <span slot="suffix">- ㎡</span>
        </el-input>
      </el-form-item>
      <el-form-item
        label="同级排序"
        prop="projectName"
        :rules="[
          { required: true, message: '请输入排序号', trigger: 'blur' },
          { min: 0, max: 50, message: '长度不超过50个字符', trigger: 'blur' },
        ]"
      >
        <el-input
          v-filter-input
          v-model.trim="queryParams.projectName"
          placeholder="请输入排序号"
          clearable
          size="small"
        ></el-input>
      </el-form-item>
      <el-form-item label="建筑区域展示图">
        <br />
        <el-upload
          class="avatar-uploader"
          list-type="picture-card"
          style="width: 100%"
          :action="uploadList.url"
          :headers="uploadList.headers"
        >
          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        <span class="u-fs12" style="color: #4a5062">只能上传SVG格式文件，文件不能超过10MB</span>
      </el-form-item>
    </el-form>
  </div>
</template>
<style lang="scss" scoped>
.u-ta-right {
  text-align: right;
}
::v-deep .el-upload--picture-card {
  width: 100%;
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
}
::v-deep .el-upload-list--picture-card .el-upload-list__item-actions {
  width: 100%;
  height: 220px;
}
::v-deep .el-upload-list__item-thumbnail {
  width: 100%;
  height: 220px;
}
::v-deep .el-upload-list--picture-card .el-upload-list__item {
  width: 100%;
  height: 220px;
}
</style>
